body {
	font-family: "Roboto", Arial, sans-serif;
	font-weight:400;
	margin:0px;
	padding:0px;
	font-size:14px;
	color:#212121;
	background-color:#ececec;
}
h1, h2, h3, h4, h5 {
	word-spacing:0px;
	font-weight:400;
	margin:0px;
}
h1 {
	font-size:24px;
}
h2 {
	font-size:21px;
}
h3 {
	font-size:18px;
}
h4 {
	font-size:14px;
}
bold {
	font-weight:700;
}
a	{
	cursor:pointer;
	text-decoration:none;
	color:#0e9c57;
}
a:hover {
	color:#087037;
}
p {
	line-height:20px;
}
ul, li, p {
	list-style:none;
	list-style-type:none;
	margin:0px;
	padding:0px;
}
menu {
	padding:0px;
	margin:0px;
	cursor:pointer;
}
fieldset {
	border:none;
	padding:0px;
	margin:0px;
}
legend {
	display:none;
}
.hidden {
	display:none;
}
.shown {
	display:inherit;
}
.right {
	float:right;
}
.left {
	float:left;
}
.clearfix:after {
	visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
.secondary {
	opacity:0.8;
	-webkit-opacity:0.8;
}

/****************************
BUTTONS
*****************************/
.button {
	display:inline-block;
	cursor:pointer;
	box-sizing:border-box;
	height:32px;
	line-height:32px;
	vertical-align:middle;
	background-color:none;
	padding:0px 16px 0px 16px;
	margin:0px;
	border:none;
	border-radius:3px;
	text-transform:uppercase;
	color:#0e9c57;
	font-size:13px;
	font-weight:500;
	min-width:88px;
	text-align:center;
}
.button:hover, .button:focus {
	background-color:rgba(0,0,0,0.1);
	outline:none;
}
.button:focus {
	border:1px solid rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,1);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,1);
	line-height:30px;
	opacity:1;
}
.button .label {
	opacity:0.9;
}
.button:hover .label {
	opacity:1;
}
.button-secondary, .button-secondary:hover {
	color:#666;
}
.button-delete, .button-delete:hover {
	color:#da4336;
}
.button-raised, .button-raised:hover {
	background-color:#0e9c57;
	color:#fff;
}
.button-raised:hover {
	background-color:#087037;
}
.button-raised:focus {
	border:1px solid #0e9c57;
	-webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,1);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,1);
	outline:none;
	line-height:30px;
	padding: 0px 15px;
	background-color:#087037;
}
.button-raised.button-secondary {
	color:#666;
	background-color:rgba(0,0,0,0.1);
}
.button-raised.button-secondary:hover {
	background-color:rgba(0,0,0,0.05);
}
.button.button-icon {
	display:inline-block;
	opacity:0.85;
	background-repeat:no-repeat;
	background-position:4px 4px;
	min-width:32px;
	min-height:32px;
	line-height:inherit;
}
.button.button-icon:focus {
	background-position:5px 3px;
}
/* ROUND ACTION BUTTON */
.round-button {
	position:relative;
	text-transform:none;
	width:56px;
	height:56px;
	min-width:inherit;
	box-sizing:border-box;
	box-shadow:rgba(0,0,0,0.2) 0px 1px 1px 0px;
	border-radius:50%;
	border-bottom:1px solid rgba(0,0,0,0.15);
	line-height:56px;
	text-align:center;
	background-color:#087037;
	color:#666666;
	color:rgba(0,0,0,0.5);
	font-weight:500;
	padding:16px;
	transition:-webkit-transform 0.15s cubic-bezier(.4,.0,1,1);
	-webkit-transform:scale(0.95) rotate(0deg);
}
.round-button:hover, .round-button:focus {	
	transform:scale(1);
	outline:none;
	box-shadow:rgba(0,0,0,0.15) 0px 1px 1px 1px;
	transition:-webkit-transform 0.2s cubic-bezier(.0,.0,.2,1);
	-webkit-transform:scale(1) rotate(90deg);
	background-color:#087037;
}
.round-button:focus {
	border:1px solid #fff;
	background-color:#087037;
	padding:15px;
	outline:none;
}
.round-button:focus .plus-icon, .round-button:hover .plus-icon {
	transition:opacity 0.2s cubic-bezier(0.4,.0,0.2,1);
	opacity:0;
}
.round-button:focus .create-icon, .round-button:hover .create-icon {
	transition:opacity 0.2s cubic-bezier(0.4,0,0.2,1);
	opacity:1;
}
.round-button .plus-icon {
	position:absolute;
	background-image:url("../img/plus-icon-white.svg");
	height:24px;
	width:24px;
	transition:opacity 0.2s cubic-bezier(0.4,0,0.2,1);
}
.round-button .create-icon {
	position:absolute;
	background-image:url('../img/create_referral_white_24px.svg');
	height:24px;
	width:24px;
	-webkit-transform: rotate(270deg);
	transition:opacity 0.2s cubic-bezier(0.4,0,0.2,1);
	opacity:0;
}

/* BOTTOM BUTTONS */
#bottom-container {
	position:fixed;
	z-index:100;
	width:100%;
	bottom:0px;
}
/* ROUND ACTION BUTTON */
.action-button-container {
	position:relative;
	float:right;
	right:24px;
	bottom:24px;
}

/****************************
DIALOGUE POPUP WINDOW
*****************************/
.dialogue-container {
	position:absolute;
	z-index:2000;
	top:50%;
	left:50%;
	
}
.dialogue {
	-webkit-transition:opacity 0.5s cubic-bezier(0.4, 0.0, 0.15, 1);
	-moz-transition:opacity 0.5s ease-out;-o-transition:opacity 0.3s cubic-bezier(0.4, 0.0, 0.15, 1);
	transition:opacity 0.5s cubic-bezier(0.4, 0.0, 0.15, 1);
	position:fixed;
	display:block;
	width:280px;
	top:100px;
	z-index:1000;
	margin:0px 0px 0px -140px;
}
.dialogue-content {
	padding:24px 24px 16px 24px;
}
.dialogue-content h3 {
	margin:0px 0px 16px 0px;
}
.dialogue-content p {
	margin:0px 0px 28px 0px;
}
.dialogue-content .button-container a {
	float:right;
	font-weight:500;
}
#dialogue-background {
	-webkit-transition:opacity 0.3s cubic-bezier(0.4, 0.0, 0.15, 1);
	-moz-transition:opacity 0.3s ease-out;-o-transition:opacity 0.3s cubic-bezier(0.4, 0.0, 0.15, 1);
	transition:opacity 0.3s cubic-bezier(0.4, 0.0, 0.15, 1);
	background-color:black;
	height:100%;
	left:0;
	opacity:0.5;
	position:fixed;
	pointer-events:all;
	top:0;
	width:100%;
	z-index:777;
}
#dialogue.close {
	opacity:0.00000001;
	pointer-events:none;
	cursor:none;
}
#dialogue-background.close {
	opacity:0.00000001;
	pointer-events:none;
	cursor:none;
}


/****************************
TOAST / UNDO MESSAGING
*****************************/
.toast-container {
	position:relative;
	float:left;
	width:100%;
}
.toast {
	display:block;
	position:relative;
	float:left;
	background-color:#323232;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
	color:#fff;
	margin-top:8px;
	width:100%;
	transition:opacity 200ms, -webkit-transform 300ms cubic-bezier(0.165, 0.840, 0.440, 1);
	z-index:50;
	-webkit-animation-name:toast-in;
	-webkit-animation-iteration-count:1;
	-webkit-animation-duration: 500ms;
	-webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	animation-name:toast-in;
	animation-iteration-count:1;
	animation-duration:500ms;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.toast-description {
	position:relative;
	display:inline-block;
	padding:16px 48px 16px 24px;
	line-height:18px;
	z-index:50;
}
.toast-description-with-action {
	padding:16px 96px 16px 24px;
}
.toast-action {
	position:absolute;
	display:block;
	right:0px;
	top:18px;
}
.toast-dismiss {
	position:absolute;
	display:inline-block;
	right:9px;
	top:9px;
	z-index:50;
}
@-webkit-keyframes toast-in {
    0% {
        -webkit-transform: translateY(64px);
        opacity:0;
    }
    100% {
        -webkit-transform: translateY(0);
        opacity:1;
    }
}

/********************************************************
LOADING BAR ANIMATION (add to the bottom of the app-bar)
********************************************************/
.loader-container {
	position:absolute;
	bottom:0px;
	width:100%;
	height:4px;
}
.loader-container.hidden {
	visibility:hidden;
}
.loader {
	position:relative;
	display:block;
}
.loader-item {
	position:absolute;
	top:0px;
	margin-top:4px;
	height:4px;
	width:0%;
	box-shadow:inset 2px 0px 1px 1px rgba(0,0,0,0.2);
	border-radius:2px;
    animation: loaderScale 2s infinite cubic-bezier(0.165, 0.840, 0.440, 1);
    -webkit-animation: loaderScale 2s infinite cubic-bezier(0.165, 0.840, 0.440, 1);
    
}
.loader.loader-left .loader-item {
	float:right;
	transform-origin:left;
	-webkit-transform-origin:left;
	left:49%;
}
.loader.loader-right .loader-item {
	float:left;
	transform-origin:right;
	-webkit-transform-origin:right;
	right:49%;
}
.loader-item.loader-item-1 {
	background-color:#4285f4;
    z-index:0;
}
.loader-item.loader-item-2 {
	background-color:#f4b400;
	animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    z-index:0;
}
.loader-item.loader-item-3 {
	background-color:#0f9d58;
	animation-delay: 1s;
    -webkit-animation-delay: 1s;
    z-index:0;
}
.loader-item.loader-item-4 {
	background-color:#db4437;
	animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    z-index:0;
}
@-webkit-keyframes loaderScale {
	0% {
		z-index:1000;
	}
	100% {
		width:55%;
	}
	
}


/****************************
MAIN COLUMN, APP BAR
*****************************/
#app-wrapper {
	position:relative;
}

#main-panel {
	position:relative;
	margin-left:0px;
	margin-top:56px;
	
}
#main-panel.tall-header {
	margin-top:136px;
}
.column-main {
	position:relative;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}
.column-main .half {
	
}

/* APP BAR */
.app-bar {
	display:block;
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	z-index:10;
	padding:12px 0px 12px 0px;
	background-color:#0e9c57;
	color:#fff;
	box-shadow:0 2px 4px rgba(0,0,0,0.1);
	white-space:nowrap;
}
.app-bar-title {
	position:relative;
	display:inline-block;
	margin-left:16px;
	font-weight:300;
}
.app-bar-content {

}
.app-bar-content.left {
	position:relative;
	margin-left:8px;
}
.app-bar-content.right {
	position:relative;
}
.app-bar-content.right .button {
	margin-left:8px;
}
.app-bar-content.left .button {
	margin-right:8px;
}
.app-bar-content h1 {
	padding:0px 0px 0px 0px;
	
	font-size:21px;
	vertical-align:middle;
	height:32px;
	line-height:32px;
}
.app-bar-title label {
	opacity:0.8;
	white-space:nowrap;
}


/* TALL APP BAR STYLES */
.app-bar-tall {
	height:inherit;
}
.app-bar-top {
	height:56px;
	position:relative;
}
.app-bar-bottom {
	position:relative;
	height:56px;
}
.app-bar-tall .app-bar-title {
	position:absolute;
	display:block;
	left:72px;
}
.app-bar label {
	color:#fff;
}
.app-bar-tall .app-bar-title h1  {
	padding:3px 0px 0px 0px;
	font-weight:400;
	font-size:24px;
	white-space:nowrap;	
}

/* APP BAR BUTTONS */
.app-bar .button:focus {
	opacity:1;
	border:none;
	box-shadow:none;
	-webkit-box-shadow:none;
	line-height:32px;
	color:#fff;
}
.app-bar .button:hover {
	color:#fff;
}
.button-appbar-icon {
	display:inline-block;
	opacity:0.85;
	background-repeat:no-repeat;
	background-position:4px 4px;
	min-width:32px;
	min-height:32px;
	line-height:inherit;
}
.button-appbar-icon:hover {
	opacity:1;
	
}
.button-appbar-icon:focus {
	border:none;
	box-shadow:none;
	-webkit-box-shadow:none;
	opacity:1;
}
.button-appbar {
	display:inline-block;
	color:#fff;
	height:32px;
	background: rgba(0,0,0,0);
}
.button-menu {
	display:inline-block;
	width:24px;
	height:24px;
	background-image: url("../img/ic_menu_white_24px.svg");
}
.button-close {
	display:inline-block;
	width:24px;
	height:24px;
	background-image: url("../img/x-icon-black.svg");
}
.button-close-white {
	display:inline-block;
	width:24px;
	height:24px;
	background-image: url("../img/x-icon-white.svg");
}
.button-trash {
	display:inline-block;
	width:24px;
	height:24px;
	background-image: url("../img/trash-icon-white.svg");
}
.button-back {
	display:inline-block;
	width:24px;
	height:24px;
	background-image: url("../img/ic_arrow_back_white_24px.svg");
}


/****************************
NAV - LEFT PANEL NAV BAR
*****************************/
#left-panel {
	display:block;
	position:fixed;
	z-index:1000;
	margin-left:-265px;
	top:0px;
	width:265px;
	height:100%;
	background:#f1f1f1;
	box-shadow:0 1px 2px 0px rgba(0,0,0,0.2);
}
#left-panel.open {
	margin-left:0px;
	-webkit-transition:margin 0.3s cubic-bezier(0.4, 0.0, 0.15, 1);
	-moz-transition:margin 0.3s ease-out;-o-transition:opacity 0.3s cubic-bezier(0.4, 0.0, 0.15, 1);
	transition:margin 0.3s cubic-bezier(0.4, 0.0, 0.15, 1);
	
}
#nav-header {
	height:56px;
	background-color:#0b8043;
}
#logo {
	display:inline-block;
	width:100%;
	height:56px;
}
#logo img {
	margin-top:12px;
	margin-left:12px;
	overflow:hidden;
}
#logo h2 {
	display:inline-block;
	color:#fff;
	font-weight:300;
	vertical-align:top;
	padding:0px 0px 0px 11px;
	line-height:56px;
}
#left-panel .sidebar-title-bar {
	padding:0px 16px 0px 24px;
	line-height:60px;
	font-weight:700;
	text-transform:uppercase;
}

/* LEFT NAV LIST */
#left-panel nav {
	white-space:nowrap;
	overflow:hidden;
}
#left-panel nav .primary-sitenav {
	
}
#left-panel nav .secondary-sitenav {
	position:relative;
	width:100%;
	border-top:1px solid rgba(0,0,0,0.05);
}
#left-panel .version-indicator {
	position:absolute;
	width:100%;
	bottom:0px;
	font-size:11px;
}
#left-panel nav a {
	display:block;
	position:relative;
	color:#666;
}
#left-panel nav a.selected {
	color:#3367D6;
}
#left-panel nav a.selected .icon {
	opacity:1;
}
#left-panel nav a:hover {
	color:#333;
	background-color:rgba(0,0,0,0.05);
}
#left-panel nav a:focus {
	border-left:4px solid #4285f4;
	color:#333;
	outline:none;
}
#left-panel nav a:focus .icon {
	padding-left:12px;
	background-position-x:12px;
	opacity:0.8;
}
#left-panel nav a .list-description {
	vertical-align:middle;
	padding:8px 8px 8px 0px;
}
#left-panel nav a .icon {
	width:24px;
	height:24px;
	padding:12px 16px;
	margin:0px;
	opacity:0.4;
	vertical-align:middle;
	display:inline-block;
	background-position:16px 12px;
	background-repeat:no-repeat;
}
#left-panel nav a .icon.icon-person {
	background-image:url('../img/ic_person_24px.svg');
}
#left-panel nav a .icon.icon-time-off {
	background-image:url('../img/clock-icon.svg');
}
#left-panel nav a .icon.icon-calendar {
	background-image:url('../img/google-icon-black.svg');
}
#left-panel nav a .icon.icon-policy {
	background-image:url('../img/clipboard-icon.svg');
}
#left-panel nav a .icon.icon-help {
	background-image:url('../img/question-icon.svg');
}
#left-panel nav a .icon.icon-feedback {
	background-image:url('../img/feedback-icon.svg');
}
.icon.icon-dogfood {
	background-image:url('../img/dogfood-icon-black.svg');
}

/* NAV DRAWER BLACKOUT */
#navdrawer-bg {
	-webkit-transition:opacity 0.5s cubic-bezier(0.4, 0.0, 0.15, 1);
	-moz-transition:opacity 0.5s ease-out;-o-transition:opacity 0.3s cubic-bezier(0.4, 0.0, 0.15, 1);
	transition:opacity 0.5s cubic-bezier(0.4, 0.0, 0.15, 1);
	background-color:black;
	height:100%;
	left:0;
	opacity:0.0000001;
	pointer-events:none;
	position:fixed;
	top:0;
	width:100%;
	z-index:777;
}
.navdrawer-bg-event {
	pointer-events:auto;
}
#navdrawer-bg.open {
	opacity:0.5;
	pointer-events:auto;
	cursor:pointer;
}
.composited-layer {
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden
}

/****************************
PAGE SECTIONS / CARD BASICS
*****************************/
.page-sections {
	margin:0px 0px 48px 0px;
	display:block;
	position:relative;
}
.page-section-item {
	position:relative;
}
.section {
	display:block;
	margin-top:16px;
}
.section:after {
	/* clear fix */
	display:block;
	content:"";
	height:0px;
	width:0px;
	clear:both;
}
.full-section {
	width:auto;
}
.half-section {
	
}
.card {
	box-shadow:0px 1px 2px rgba(0,0,0,0.15);
	border-radius:2px;
	background:#fff;
	overflow:hidden;
}
.card-header {
	padding:0px 16px 0px 16px;
	line-height:48px;
}
.card-content {
	padding:0px 16px;
}
/* EMPTY LIST - NO TIME OFF */
.empty-set-message {
	display:block;
	position:relative;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	max-width:280px;
	padding:64px 24px 40px 24px;
	text-decoration:none;
}
.empty-set-image {
	width:280px;
	height:120px;
	opacity:0.15;
	background-image:url('../img/casey-large.svg');
	background-repeat:no-repeat;
	background-position:center top;
	background-size: contain;
}
.empty-set-message p {
	color:#000000;
	font-size:21px;
	line-height:28px;
	font-weight:200;
	opacity:0.4;
	padding-top:24px;
}
p.instructions {
	padding:24px 16px 8px 16px;
}
.form-section .instructions {
	padding:inherit;
}

#finish-later .button {
	display:block;
	width:160px;
	margin:0px auto;
}

/****************************
CARD LISTS
*****************************/
.list {
	
}
.listitem {
	position:relative;
	display:block;
	min-height:48px;
	white-space:nowrap;
	margin-top:-1px;
}
.listitem:hover {
	background-color:rgba(0,0,0,0.025);
	background-color:#f7f7f7;
	cursor:pointer;
}

.listitem-icon-container {
	display:inline-block;
	position:relative;
	padding:0px 16px 0px 16px;
	top:2px;
}
.listitem-desc-container {
	display:inline-block;
	width:100%;
	padding:17px 8px 16px 0px;
	box-sizing:border-box;
	border-bottom:1px solid #ebebeb;
}
.listitem:last-child .listitem-desc-container {
	border-bottom:none;
}
.listitem:last-child .listitem-desc {
	border-bottom:none;
}
.listitem-desc-primary {
	color:#333333;
	font-size:16px;
	overflow-x:hidden;
}
.listitem-desc-primary .secondary {
	font-size:14px;
	color:#989898;
	opacity:1;
}
.listitem-desc-secondary {
	font-size:14px;
	margin-top:6px;
	color:#666666;
}
.listitem-desc-tertiary {
	position:absolute;
	display:block;
	padding:4px 16px 4px 16px;
	font-size:14px;
	color:#989898;
	right:0px;
	top:15px;
	background-color:#fff;
	min-width:0px;
	min-height:24px;
}
.listitem:hover .listitem-desc-tertiary {
	background-color:#f7f7f7;
}
.listheader {
	color:#616161;
	line-height:48px;
	padding:0px 0px 0px 16px;
}
.listheader .button {
	margin-top:8px;
}
/* Accessibility: LIST FOCUS STYLES */
.listitem:focus {
	box-sizing:border-box;
	border-left:3px solid #087037;
	outline:none;
}
.listitem:focus .listitem-icon-container {
	margin-left:-3px;
}

/* CANDIDATES LISTITEM */

.list-type-icon {
	width:40px;
	height:40px;
	border-radius:50%;
	background-color:#222;
	background-repeat:no-repeat;
	background-position:8px 8px;
}
.list-type-icon.secondary {
	background-color:#000000;
	opacity:0.4;
	-webkit-opacity: 0.4;
}
.list-type-score {
	position:absolute;
	width:40px;
	color:#fff;
	font-size:18px;
	line-height:24px;
	margin-top:-32px;
	text-align:center;
	text-transform:uppercase;
}

.list-type-referral {
	background-image: url("../img/referral_white_24px.svg");
}
.list-type-edit {
	background-image: url("../img/edit_white_24px.svg");
}
.time-type-sick {
	background-image: url("../img/sick-icon-white.svg");
}
.time-type-jury {
	background-image: url("../img/jury-icon-white.svg");
}
.time-type-baby {
	background-image: url("../img/baby-icon-white.svg");
}
.time-type-family {
	background-image: url("../img/family-icon-white.svg");
}
.time-type-education {
	background-image: url("../img/education-icon-white.svg");
}
.time-type-holiday {
	background-image: url("../img/google-icon-white.svg");
}



/****************************
INPUT FIELD CARDS & INPUTS
*****************************/
.card.card-for-inputs {
	padding:16px 16px;
}
.page-sections.variable-topmargin {
	padding-top:0px;
}
.form-section {
	padding:8px 0px;
}
.form-section:after {
	content:'';
    display:block;
	clear:both;
}
.inactive {
	opacity:0.2;
	pointer-events:none;
}
/* INPUT FIELDS */
.input-container {
	position:relative;
	box-sizing:border-box;
	padding:8px 0px 8px 0px;
}
.input-container-half {
	width:50%;
	padding:8px 0px 8px 0px;
}
.input-container-half.left {
	padding-right:8px;
}
.input-container-half.right {
	padding-left: 8px;
}
input, select {
	box-sizing:border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
input {
	position:relative;
	font-size:16px;
	display:inline-block;
	box-sizing:border-box;
	margin:0px;
	width:100%;
	border:none;
	outline:none;
	padding:8px 0px;
	border-bottom:2px solid #e0e0e0;
	
}
textarea {
	position:relative;
	font-size:16px;
	display:inline-block;
	box-sizing:border-box;
	margin:0px;
	width:100%;
	border:none;
	outline:none;
	padding:8px 0px;
	border-bottom:2px solid #e0e0e0;
	min-height:100px;
	resize:vertical;
}
textarea:focus {
	border-bottom:2px solid #0e9c57;
}
::input-placeholder {
	
} 
::-webkit-input-placeholder { /* WebKit browsers */
    
}

input:focus {
	border-bottom:2px solid #0e9c57;
}
label {
	font-size:12px;
	opacity:0.6;
}
label.fullopacity {
	opacity:1;
}
.input-title {
	font-size:21px;
}
.required-star {
	color:red;
}
.input-question {
	font-size: 16px;
	line-height:22px;
	margin-bottom:8px;
}
.input-note {
	font-size:12px;
	color:#000;
	opacity:0.66;
	padding:8px 0px;
}
.input-button-container label {
	display:block;
	padding-bottom:8px;
}
/* SELECTION INPUTS */
.input-select-container label {
	display:block;
	margin-bottom:8px;
}
select {
	position:relative;
	display:inline-block;
	box-sizing:border-box;
	margin:0px;
	padding:8px 0px;
	width:100%;
	border:none;
	border-radius:0px;
	-webkit-border-radius: 0px;
	outline:none;
	background:transparent;
	-webkit-appearance: none;
	-moz-appearance: window;
	border-bottom:2px solid #e0e0e0;
	cursor:pointer;
	font-size:16px;
}
.select-container {
	position:relative;
	box-sizing:border-box;
	
}
.select-container:before {
	content:'';
    display:inline-block;
    position:absolute;
    right:0px;
    bottom:16px;
    width: 0; 
	height: 0; 
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #999;
}
.select-title {
	font-size:21px;
}

select:focus {
	border-bottom:2px solid #0e9c57;
}

input[type='date'] {
	background:none;
}

input[type='date']:focus /deep/ #date-time-edit::before {
	opacity:0.8;
}

input /deep/ #date-time-edit::before {
	content: '';
	width: 24px;
	height: 24px;
	background: url('../img/calendar-icon.svg');
	opacity:0.4;
	position: absolute;
	left: 0px;
	top: 8px;
}

input /deep/ #date-time-edit {
	font-family: "Roboto", Arial, sans-serif;
	font-weight:400;
	margin-left:38px;
	cursor:text;	
}
input::-webkit-datetime-edit-text {
	color:#999;
	padding:0px 0px;
	
}
input::-webkit-datetime-edit-month-field,
input::-webkit-datetime-edit-day-field,
input::-webkit-datetime-edit-year-field { 
	color:#212121; 
	background:none;
	padding:0px 4px;
}
input::-webkit-datetime-edit-month-field:focus,
input::-webkit-datetime-edit-day-field:focus,
input::-webkit-datetime-edit-year-field:focus { 
	background:#ebebeb;
}
input::-webkit-clear-button {
	display:none;
}
input::-webkit-inner-spin-button {
	display:none;
}
input::-webkit-calendar-picker-indicator {
	display:inline-block;
	position:absolute;
	left:0px;
	padding:0px;
	width: 0px; 
	height: 0px;
	padding:14px 19px 18px 5px;
	color:#999;
	cursor:pointer;
}
input::-webkit-calendar-picker-indicator:hover {
	background:none;
}

/*//////////////////
// RADIO BUTTONS  //
//////////////////*/
.radio-container {
	position:relative;
	min-height:36px;
	margin-bottom:4px;
}
.radio-container label {
	display:inline-block;
	font-size:16px;
	padding-top:8px;
	line-height:20px;
	margin-left:40px;
	cursor:pointer;
	transition:opacity 0.2s;
}
.radio-container input[type="radio"],
.radio-container label::before,
.radio-container label::after {
    width: 24px;
    height: 24px;
	padding-top:8px;
    left:0px;
    box-sizing:border-box;
    margin-top: 0px;
    position:absolute;
    cursor: pointer;
}
.radio-container input[type="radio"] {
    opacity: 0;
    display: inline-block;
    vertical-align: middle;
    z-index: 100;
}
.radio-container label::before {
    content: '';
    width:22px;
    height:22px;
    border: 2px solid #666;
    border-radius:11px;
    -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), border 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
	-moz-transition:    -moz-transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), border 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
	-o-transition:      -o-transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), border 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
	-ms-transition:     -ms-transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), border 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
	transition:         transform, 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), border 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
	z-index:2;
}
.radio-container input[type="radio"]:checked + label {
    opacity:1;
} 
.radio-container input[type="radio"]:checked + label::before {
	
	border-top: none;
	border-left: none;
	border-right-width: 2px;
	border-bottom-width: 2px;
	background-color: #0e9c57;
	border-color: #0e9c57;
	
}
/* this is the checkbox focus style */
.radio-container label::after {
	pointer-event:none;
	content: '';
    width:38px;
    height:38px;
    border-radius:50%;
    top:0px;
    left:-8px;
    background:none;
}
.radio-container input[type="radio"]:hover + label::before {
	border-color:#0e9c57;
}
.radio-container input[type="radio"]:focus + label::after {
	background:#333;
	opacity:0.1;
}
.radio-container input[type="radio"]:focus:checked + label::after {
	background:green;
}
.radio-container input[type="radio"]:focus + label, .checkbox-container input[type="radio"]:hover + label {
	opacity:1;
}


/* CHECKBOX */
.checkbox-container {
	position:relative;
}

/* input[type='checkbox'] {
	display:absolute;
	opacity:0;
	display:none;
	width:0px;
	height:0px;
} */

.checkbox-container label {
	display:inline-block;
	font-size:16px;
	line-height:24px;
	margin-left:40px;
	cursor: pointer;
    transition: opacity 0.2s;	
}

.checkbox-container input[type="checkbox"],
.checkbox-container label::before,
.checkbox-container label::after {
    width: 24px;
    height: 24px;
    top: 8px;
    left:0px;
    box-sizing:border-box;
    margin-top: 0px;
    position: absolute;
    cursor: pointer;
}
.checkbox-container input[type="checkbox"] {
    opacity: 0;
    display: inline-block;
    vertical-align: middle;
    z-index: 100;
}
 
.checkbox-container label::before {
    content: '';
    width:22px;
    height:22px;
    border: 2px solid #666;
    border-radius:2px;
    -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), border 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
	-moz-transition:    -moz-transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), border 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
	-o-transition:      -o-transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), border 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
	-ms-transition:     -ms-transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), border 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
	transition:         transform, 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), border 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
	z-index:2;
}
.checkbox-container input[type="checkbox"]:checked + label {
    opacity:1;
} 
.checkbox-container input[type="checkbox"]:checked + label::before {
    -webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 6px;
	left: 6px;
	width: 10px;
	height: 21px;
	border-top: none;
	border-left: none;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-color: #0f9d58;
	border-radius:0px;
}
/* this is the checkbox focus style */
.checkbox-container label::after {
	pointer-event:none;
	content: '';
    width:38px;
    height:38px;
    border-radius:50%;
    top:0px;
    left:-8px;
    background:none;
}
.checkbox-container input[type="checkbox"]:hover + label::before {
	border-color:#0f9d58;
}
.checkbox-container input[type="checkbox"]:focus + label::after {
	background:#333;
	opacity:0.1;
}
.checkbox-container input[type="checkbox"]:focus:checked + label::after {
	background:green;
}
.checkbox-container input[type="checkbox"]:focus + label, .checkbox-container input[type="checkbox"]:hover + label {
	opacity:1;
}

/* READ-ONLY (Old) FORM STYLES */
.read-only-card .input-container {
	padding:0px;
}
.read-only {
	font-size:16px;
	padding:8px 0px;
	line-height:16px;
}
.read-only.title {
	font-size:21px;
	line-height:21px;
}
.status-container {
	position:relative;
	display:block;
	min-height:48px;
	white-space:nowrap;
	padding:8px 0px 8px 0px;
	
	margin:0px 0px 16px 0px;
}
.statusitem-icon-container {
	padding:0px 16px 0px 0px;
	display:inline-block;
}
.statusitem-desc-container {
	display:inline-block;
	width:100%;
	padding:0px 8px 16px 0px;
	box-sizing:border-box;
}
.statusitem:last-child .listitem-desc {
	border-bottom:none;
}
.statusitem-desc-primary {
	color:#333333;
	font-size:16px;
	width:100%;
}
.statusitem-desc-secondary {
	font-size:14px;
	margin-top:6px;
	color:#989898;
}

/* DESKTOP ONLY BUTTONS */
.desktop-only {
	display:none;
}

/* CARD BUTTONS */
.card-button-container {
	position:relative;
	height:32px;
	padding:16px 0px 0px 0px;
}
.card-button-container::after {
	content:"";
	display:inline-block;
	width:0px;
	height:0px;
	clear:both;
}
.card-button-container.right .button {
	margin-left:8px;
}
.card-button-container.left .button {
	margin-right:8px;
}

/* ERROR STATES */
input.error, select.error {
	border-bottom-color: #da4336;
}
.error-inline {
	position:relative;
	color: #da4336;
	padding:8px 20px 0px 0px;
	font-size:12px;
	line-height:14px;
}
.error-inline::after {
	display:inline-block;
	position:absolute;
	width:24px;
	height:24px;
	content:"";
	right:0px;
	top:4px;
	background-image:url('../img/warning-icon-red.svg');
}
.error-header-container {

}
.error-header {
	position:relative;
	display:block;
	background-color:#da4336;
	color:#FFFFFF;
	padding:20px 24px 4px 16px;
}
.error-header a, .error-header a:visited, .error-header a:hover {
	color:#FFFFFF;
	text-decoration:underline;
}
.error-header-message {
	position:relative;
	display:block;
	line-height:18px;
	padding:0px 32px 16px 32px;
}
.error-header-message:last-child {
	padding-bottom:16px;
}
.error-header-message::before {
	content:"";
	display:inline-block;
	position:absolute;
	width:24px;
	height:24px;
	left:0px;
	top:-2px;
	background-image:url('../img/warning-icon-white.svg');
}
.error-header-warning .error-header-message::before {
	background-image:url('../img/ic_info_outline_white_24px.svg');
}
.error-header-dismiss {
	position:absolute;
	display:inline-block;
	right:8px;
	top:13px;
}
.error-header-warning {
	background-color:#323232;
}

/***********************************************************
RESIZE SCREEN BREAKPOINTS (all above are Mobile by default)
***********************************************************/
/* DESKTOP ONLY BUTTONS */
.desktop-only {
	display:none;
}


/* BREAK POINT TO SMALL TABLET-ISH SIZING */
@media (min-width: 550px) {
	.column-main {
		width:550px;
	}
	.app-bar-title {
		margin-left:4px;
	}
	.balance-casey {
		display:inherit;
	}
	.balance-description h2 {
		padding-top:20px;
		margin-bottom:16px;
		font-size:40px;
	}
	.card-vacation-balance {
		padding:8px 16px 8px 16px;
	}
	/* input card pages */
	.page-sections.variable-topmargin {
		padding-top:24px;
	}
	/* error header card */
	.error-header-container {
		border-radius:2px;
		overflow:hidden;
	}
	.error-header-container.variable-topmargin {
		padding-top:24px;
	}
	.toast-container {
		bottom:24px;
		left:24px;
		min-width:288px;
		max-width:568px;
		width:auto;
	}
	.toast {
		border-radius:24px;
	}
	.dialogue {
		width:320px;
		margin:0px 0px 0px -160px;
	}
}

/* BREAK POINT TO TABLET-ISH SIZING */
@media (min-width: 700px) {
	.column-main {
		width:700px;
	}
	#finish-later .button {
	display:inline-block;
	margin:0px 0px;
	}
	.dialogue {
		width:560px;
		margin:0px 0px 0px -260px;
	}
	
}

/* BREAK POINT TO 'SMALL DESKTOP' SIZING */
@media (min-width: 990px) {
	.mobile-only {
		display:none;
	}
	.desktop-only {
		display:inherit;
	}
	#left-panel {
		margin-left:0px;
	}
	#navdrawer-bg.open {
		opacity:0.000000001;
		pointer-events:none;
		cursor:default;
	}
	#app-bar {
		left:265px;
	}
	#main-panel {
		margin-left:265px;	
	}
	.app-bar-tall .button-appbar {
		margin:20px 0px 12px 8px;
	}
	.action-button-container {
		right:32px;
	}
	.toast-container {
		left:292px;
	}
	
}

/* BREAK POINT TO BIG DESKTOP SIZING */
@media (min-width: 1280px) {
	.column-main {
		width:900px;
	}
	.app-bar-title {
		margin-left:8px;
	}
	.app-bar-content.left {
		margin-left:16px;
	}
	/* left nav panel */
	#left-panel #ldap {
		left:24px;
	}
	#left-panel #circle {
		left:24px;
	}
	#left-panel nav a .icon {
		padding-left:24px;
		background-position:24px 12px;
	}
	#left-panel nav a:focus .icon {
		padding-left:20px;
		background-position: 20px 12px;
	}
	/* home / list page */
	.card-vacation-balance {
		padding:16px 24px 16px 24px;
	}
	.card-vacation-balance:focus {
		padding-left:21px;
	}
	.listheader {
		padding:0px 0px 0px 24px;
	}
	.listitem-icon-container {
		padding:0px 16px 0px 24px;
	}
	.listitem-desc-tertiary {
		padding-right:24px;
	}
	.error-header {
		padding:20px 24px 4px 24px;
	}
	/* error messages */
	.error-header-dismiss {
		right:16px;
	}
	/* input card pages */
	.card.card-for-inputs {
		padding:24px 24px;
	}
}

/*BREAK POINT FOR VERY SHORT SCREENS */
@media (max-height: 500px) {
	#left-panel .version-indicator {
		position:relative;
		font-size:inherit;
	}
}
